@charset 'utf-8';
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
}

header {
    height: r(150);
    width: 100%;
    background: white;
    position: absolute;
    top: 0;
    div {
        vertical-align: middle;
    }
    .left {
        float: left;
        margin-left: r(30);
        margin-top: r(48);
        input {
            width: r(122);
            height: r(55);
            background: transparent;
            vertical-align: top;
            font-size: r(25);
            border: 1px solid #ff9344;
            border-radius: r(15);
        }
    }
    .right {
        float: right;
        margin-right: r(22);
        margin-top: r(45);
        img {
            width: r(61);
            height: r(55);
        }
    }
    .center {
        width: r(120);
        height: r(120);
        line-height: r(150);
        vertical-align: middle;
        margin: 0 auto;
        text-align: center;
        p {
            font-size: r(25);
        }
    }
}

footer {
    width: 100%;
    height: r(136);
    background: white;
    position: absolute;
    bottom: 0;
    ul {
        li {
            margin-top: r(16);
            float: left;
            width: 25%;
            height: 100%;
            text-align: center;
            a {
                color: black;
            }
            .iconfont {
                font-size: r(70);
                color: transparent;
                -webkit-text-stroke: r(1) #ff9344;
            }
            p {
                font-size: r(26);
            }
            &.active .iconfont {
                color: #FF9344;
            }
        }
    }
}

section {
    width: 100%;
    position: absolute;
    top: r(150);
    bottom: r(136);
    overflow-y: scroll;
    .top {
        width: 95%;
        margin: 0 auto;
        ul {
            li {
                float: left;
                width: 33%;
                img {
                    width: r(170);
                    height: r(170);
                }
                &>a:first-child {
                    font-size: r(30);
                    font-weight: bold;
                    
                    color: #000000;
                    p{
                        margin-top: r(32);
                    }
                }
                &>a:nth-child(2) {
                    font-size: r(26);
                    color: #a9a9a9;
                    
                    p{
                        margin-top: r(38);
                    }
                }
            }
            #right {
                a{
                    font-size: r(80);
                    text-align: right;
                }
            }
        }
    }
    .center {
        width: 95%;
        margin: 0 auto;
        a{
            color: black;
        }
        div {
            float: left;
        }
        .left {
            width: r(193);
            background: #b2e0a0;
            text-align: center;
            margin-right: r(60);
            img {
                width: r(78);
                height: r(82);
                margin-top: r(19);
            }
            p {
                font-size: r(26);
                line-height: r(48);
            }
        }
        .center {
            width: r(193);
            //          height: r(149);
            background: #a0dce0;
            text-align: center;
            margin-right: r(60);
            img {
                width: r(84);
                height: r(80);
                margin-top: r(19);
            }
            p {
                font-size: r(26);
                line-height: r(48);
            }
        }
        .right {
            width: r(193);
            //          height: r(149);
            background: #e0b7a0;
            text-align: center;
            img {
                width: r(124);
                height: r(81);
                margin-top: r(19);
            }
            p {
                font-size: r(26);
                line-height: r(48);
            }
        }
    }
    .bottom {
        margin: 0 auto;
        width: 95%;
        margin-top: r(33);
        .navigation {
            margin-bottom: r(23);
            .left {
                width: 50%;
                line-height: r(59);
                img {
                    width: r(96);
                    height: r(74);
                    vertical-align: middle;
                }
                p {
                    font-size: r(30);
                    display: inline-block;
                    vertical-align: middle;
                }
            }
            .right {
                width: 50%;
                text-align: right;
                line-height: r(59);
                a {
                    color: black;
                }
                p {
                    font-size: r(24);
                    display: inline-block;
                }
                .iconfont {
                    font-size: r(24);
                    color: #FF9344;
                }
            }
        }
        .bao {
            margin-top: r(79);
            &>.navigation_1:first-child {
                margin-bottom: r(26);
                .left {
                    width: 50%;
                    line-height: r(59);
                    img {
                        width: r(76);
                        height: r(79);
                        vertical-align: middle;
                    }
                    p {
                        font-size: r(30);
                        display: inline-block;
                        vertical-align: middle;
                        margin-left: r(20);
                    }
                }
                .right {
                    width: 50%;
                    text-align: right;
                    line-height: r(59);
                    a {
                        color: black;
                    }
                    p {
                        font-size: r(24);
                        display: inline-block;
                    }
                    .iconfont {
                        font-size: r(24);
                        color: #FF9344;
                    }
                }
            }
            &>.navigation_1:nth-child(2) {
                .left {
                    width: 50%;
                    line-height: r(59);
                    img {
                        width: r(84);
                        height: r(59);
                        vertical-align: middle;
                    }
                    p {
                        font-size: r(30);
                        display: inline-block;
                        vertical-align: middle;
                        margin-left: r(13);
                    }
                }
                .right {
                    width: 50%;
                    text-align: right;
                    line-height: r(59);
                    a {
                        color: black;
                    }
                    p {
                        font-size: r(24);
                        display: inline-block;
                    }
                    .iconfont {
                        font-size: r(24);
                        color: #FF9344;
                    }
                }
            }
        }
        .button {
            text-align: center;
            width: 95%;
            div {
                float: left;
                width: 50%;
                button {
                    width: r(111);
                    height: r(60);
                    border-radius: r(20);
                    font-size: r(30);
                    color: white;
                    background: #ff9649;
                    margin-top: r(35);
                }
            }
        }
    }
}